{% extends "layout.html" %} {% block content %}

<div class="m-10">
  <div class="flex flex-col items-center justify-center w-full">
    <form
      action="/upload"
      class="w-full"
      method="post"
      enctype="multipart/form-data"
    >
      <label
        for="dropzone-file"
        class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
        id="dropzone-label"
      >
        <div
          class="flex flex-col items-center justify-center pt-5 pb-6"
          id="file-preview"
        >
          <svg
            class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 20 16"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
            />
          </svg>
          <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
            <span class="font-semibold">Click to upload results</span> or drag
            and drop
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">PDFs only</p>
        </div>
        <input
          id="dropzone-file"
          type="file"
          name="file"
          class="hidden"
          multiple
        />
      </label>

      <div class="m-5 flex flex-row gap-2">
        <input
          type="submit"
          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 w-full dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
          value="Upload PDFs"
        />
      </div>
    </form>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const fileInput = document.getElementById("dropzone-file");
        const filePreview = document.getElementById("file-preview");
        const dropzoneLabel = document.getElementById("dropzone-label");

        dropzoneLabel.addEventListener("dragenter", function (e) {
          e.preventDefault();
          dropzoneLabel.classList.add("border-blue-500");
        });

        dropzoneLabel.addEventListener("dragover", function (e) {
          e.preventDefault();
          dropzoneLabel.classList.add("border-blue-500");
        });

        dropzoneLabel.addEventListener("dragleave", function () {
          dropzoneLabel.classList.remove("border-blue-500");
        });

        dropzoneLabel.addEventListener("drop", function (e) {
          e.preventDefault();
          dropzoneLabel.classList.remove("border-blue-500");

          const files = e.dataTransfer.files;
          filePreview.innerHTML = ""; // Clear previous preview

          for (const file of files) {
            const fileName = document.createElement("p");
            fileName.textContent = file.name;
            fileName.className =
              "mb-2 text-sm text-gray-500 dark:text-gray-400";
            filePreview.appendChild(fileName);
          }

          fileInput.files = files; // Update the file input's files property
        });

        fileInput.addEventListener("change", function () {
          const files = fileInput.files;
          filePreview.innerHTML = ""; // Clear previous preview

          for (const file of files) {
            const fileName = document.createElement("p");
            fileName.textContent = file.name;
            fileName.className =
              "mb-2 text-sm text-gray-500 dark:text-gray-400";
            filePreview.appendChild(fileName);
          }
        });
      });
    </script>
  </div>

  {% with messages = get_flashed_messages(category_filter=["upload"]) %} {% if
  messages %}
  <div
    class="flex p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
    role="alert"
  >
    <svg
      class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      viewBox="0 0 20 20"
    >
      <path
        d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"
      />
    </svg>
    <span class="sr-only">Danger</span>
    <div>
      <span class="font-medium">Error</span>
      <ul class="mt-1.5 list-disc list-inside">
        {% for message in messages %}
        <li>{{message}}</li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endif %} {% endwith %}

  <div>
    <h1
      class="mb-4 text-2xl font-extrabold leading-none tracking-tight text-gray-900 md:text-3xl lg:text-4xl dark:text-white"
    >
      Database Operations
    </h1>
    <div class="flex mt-5">
      <button
        type="button"
        class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800 flex flex-row items-center gap-2"
      >
        <svg
          width="24"
          height="30"
          fill="#FFF"
          viewBox="0 0 64 64"
          data-name="Layer 1"
          id="Layer_1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
          <g
            id="SVGRepo_tracerCarrier"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <title></title>
            <path
              d="M50.86,13.38H13a1.5,1.5,0,0,1,0-3H50.86a1.5,1.5,0,0,1,0,3Z"
            ></path>
            <path
              d="M42.4,57.93H21.48a5.5,5.5,0,0,1-5.5-5.5V11.87a1.5,1.5,0,0,1,1.5-1.5H46.4a1.5,1.5,0,0,1,1.5,1.5V52.43A5.51,5.51,0,0,1,42.4,57.93ZM19,13.37V52.43a2.5,2.5,0,0,0,2.5,2.5H42.4a2.5,2.5,0,0,0,2.5-2.5V13.37Z"
            ></path>
            <path
              d="M40,13.37H23.9a1.5,1.5,0,0,1-1.5-1.5V6.57a1.5,1.5,0,0,1,1.5-1.5H40a1.5,1.5,0,0,1,1.5,1.5v5.3A1.5,1.5,0,0,1,40,13.37Zm-14.58-3H38.48V8.07H25.4Z"
            ></path>
            <path
              d="M24.94,47.61a1.5,1.5,0,0,1-1.5-1.5V21.46a1.5,1.5,0,0,1,3,0V46.11A1.5,1.5,0,0,1,24.94,47.61Z"
            ></path>
            <path
              d="M38.94,47.61a1.5,1.5,0,0,1-1.5-1.5V21.46a1.5,1.5,0,0,1,3,0V46.11A1.5,1.5,0,0,1,38.94,47.61Z"
            ></path>
            <path
              d="M31.94,40.38a1.5,1.5,0,0,1-1.5-1.5V28.7a1.5,1.5,0,1,1,3,0V38.88A1.5,1.5,0,0,1,31.94,40.38Z"
            ></path>
          </g>
        </svg>
        Clear Database
      </button>
      <a
        href="/execute"
        type="button"
        class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800 flex flex-row items-center gap-2"
      >
        <svg
          viewBox="0 0 100 100"
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          width="24"
          height="30"
          fill="#000000"
        >
          <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
          <g
            id="SVGRepo_tracerCarrier"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              style="fill: #ffffff; stroke: #ffffff; stroke-width: 1.5px"
              d="m 43,2 -2,10 -11,5 -8,-6 -10,10 6,9 -4,11 -11,2 0,13 11,2 4,10 -6,10 10,10 9,-6 10,4 2,11 14,0 2,-12 8,-4 10,7 L 87,79 80,68 85,59 97,57 97,43 85,41 82,31 88,21 78,11 69,17 58,12 56,2 z m 6,20 C 63,22 75,34 75,48 75,63 63,74 49,74 35,74 23,63 23,48 23,34 35,22 49,22 z"
            ></path>
          </g>
        </svg>
        Execute Query
      </a>
    </div>
  </div>
</div>

{% endblock %}
